<template>
  <div>
    <el-form ref="deptForm" :model="deptForm" :rules="deptRules" label-width="120px">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="deptForm.name" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="deptForm.code" />
      </el-form-item>
      <el-form-item label="部门负责人" style="width:80%" prop="manager">
        <el-select v-model="deptForm.manager" placeholder="请选择">
          <el-option v-for="data in emparr" :key="data.id" :label="data.username" :value="data.username" />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="deptForm.introduce" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="hSubmit">确定</el-button>
        <el-button size="small" @click="hCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getEmployeeSimple } from '@/api/employees'
import { addDepartments, getDepartmentsById, editDepartments } from '@/api/departments.js'
import { Message } from 'element-ui'
export default {
  name: '',
  props: {
    id: {
      type: String,
      required: true
    },
    editId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      // 部门负责人
      emparr: [],
      deptForm: {
        name: '',
        code: '',
        manager: '',
        introduce: ''
      },
      deptRules: {
        name: [{ required: true, message: '请输入部门名称', trigger: 'blur' }],
        code: [{ required: true, message: '请输入部门编码', trigger: 'blur' }],
        manager: [{ required: true, message: '请选择部门负责人', trigger: 'change' }],
        introduce: [{ required: true, message: '请输入部门介绍', trigger: 'blur' }]
      }
    }
  },
  computed: {
  },
  created() {
    this.loadEmployee()
    this.loadDetail()
  },
  methods: {
    hSubmit() {
      this.$refs.deptForm.validate(valid => {
        if (!valid) return
        // 组装参数
        if (this.editId) {
          const params = { ...this.deptForm, id: this.editId }
          console.log(params)
          // 调用接口
          const res = editDepartments(params)
          res.then(res => {
            console.log(res)
            Message({
              message: '修改部门信息成功',
              type: 'success',
              duration: 3 * 1000
            })
          })
        } else {
          const params = { ...this.deptForm, pid: this.id }
          console.log(params)
          // 调用接口
          const res = addDepartments(params)
          res.then(res => {
            console.log(res)
          })
          Message({
            message: '添加部门信息成功',
            type: 'success',
            duration: 3 * 1000
          })
        }
        // 表单清空
        this.$refs.deptForm.resetFields()
        // 通知父组件：关闭弹层 再次更新数据
        this.$emit('success')
      })
    },
    hCancel() {
      this.$emit('update:visible', false)
    },
    async loadEmployee() {
      const rs = await getEmployeeSimple()
      this.emparr = rs.data
    },
    loadDetail() {
      if (this.editId) {
      // 发送请求
        const rs = getDepartmentsById(this.editId)
        rs.then(res => {
          const data = res.data
          this.deptForm.name = data.name
          this.deptForm.code = data.code
          this.deptForm.manager = data.manager
          this.deptForm.introduce = data.introduce
        })
      }
    }
  }
}
</script>
<style lang='less'  scoped>

</style>
